Namo Image Slicer Overview

Images are crucial graphic elements for Web design. However, embedding a large image file in a Web document makes the downloading time too long, which becomes a distracting factor for your site visitors. For such case, dividing the large image into multiple small images and inserting them in a Web document can be a wise solution. Namo Image Slicer is a graphic tool with which you can "slice" various types of images (*.psd, *.jpg, *.gif, *.png, *.bmp) into several smaller images and also save them in various formats.

The followings are advantages of dividing a large image into several small images.

  • You can save the sliced images as different file formats. A sliced image containing only a few colors can be saved as a GIF file; another sliced image with a large number of colors can be saved as a JPG file. Some can be highlighted by inserting an animated GIF into it.
  • You can reduce the file size by substituting plain cells for the unnecessary (or unwanted) image slices.
  • Inserting an image slice as a cell background image allows you to insert text or even other images over the sliced image in the cell.
  • Because it takes less time to download smaller images when you view the document in a Web browser, you can reduce the downloading time greatly by slicing large images into smaller pieces.


Namo Image Slicer - Step by Step Introduction

Namo Image Slicer is a graphic tool with which you can "slice" various types of images (*.psd, *.jpg, *.gif, *.png, *.bmp) into smaller pieces, and save them also in various formats. You can save the NIS Project as an HTML document. Please refer to the following guidelines to create and refine images with Namo Image Slicer.

  1. Creating a new Namo Image Slicer Project
  2. Importing an image into the Project window
  3. Setting the default output file format
  4. Specifying the folder in which image slices are to be saved
  5. Setting Snap and Grid
  6. Creating image slices
  7. Moving an image slice by dragging/by entering information
  8. Resizing an image slice by dragging/by entering information
  9. Modifying the overlapping order of image slices
  10. Deleting an image slice
  11. Setting the file format of a specific image slice
  12. Setting the options for unspecified areas
  13. Exporting image slices to an HTML file


Creating a new Namo Image Slicer Project

To work with images by using Namo Image Slicer, you should first create a Project, which is an area where you can slice an image and edit the image slices.

Creating a Project

  1. Select the [File > New] menu command or click New [image] on the Toolbar.
  2. A new Project, named 'noname1', is opened.

Opening an existing Project

  1. Select the [File > Open...] menu command or click Open [image] on the Toolbar.
  2. Select a Namo Image Slicer Project file (*.nis) in the Open dialog box and click Open.

You can work with multiple images in multiple Project windows.

Namo Image Slicer Project files are saved as a file with the file extension '*.nis'.


Importing an image into the Project window

Once you have created a Project, you should import an image to work with into the Project window. You can import various types of images (*.psd, *.jpg, *.gif, *.png, *.bmp) into Namo Image Slicer.

  1. Select the [File > Import Image...] menu command or click Import Image [image] on the Toolbar.
  2. In the Import image file dialog box, select the image you wish to import. To list the files in a specific file format, specify the format from the Files of type drop-down list.
  3. Click Open. The selected image is opened in the Namo Image Slicer's Project window.

Only one image can be inserted into a Project window. To work with another image, you should create a new Project by clicking New [image] on the Toolbar.


Specifying a folder in which the sliced images are to be

Specifying a folder in which the sliced images are to be saved

You can specify a folder in which the sliced images (both the specified slices and unspecified areas) are to be saved by specifying Image folder in the Default tab of the Properties window.

  1. At the Properties window, select the Default tab. (In case the Properties window is not shown, select the [Window > Properties] menu command.
  2. Specify the folder in which you want to save the sliced image files (both the image slices and unspecified areas) in the Image folder text box.

Note that this path is relative to the directory in which the HTML document containing the sliced images is saved.

Example

  1. At the Properties window, select the Default tab.
  2. Enter 'img\' in the Image folder text box.
  3. Slice the image as you want. After finishing slicing the image, select the [File > Export to HTML... ] menu command.
  4. In the Export to HTML as dialog box, enter ''C\sample\sample1.htm' in File name and click Save.
  5. An HTML document containing the sliced images is created. All the sliced images are saved in the 'C\sample\img'.


Setting Snap and Grid

Setting the snap and grid options make the image slicing job more convenient. Setting Snap lets the image slices meet smoothly by the edge when you slice an image or move image slices while selecting Grid allows you to create fine-tuned sliced images and place them at the precise position.

Setting the Snap option

  1. Select the Snap/Grid/Zoom tab in the Properties window.
  2. Select Neighborhood Snap.
  3. Specify Tolerance of Neighborhood Snap in pixels. Tolerance refers to the application range of the Neighborhood Snap option. For example, if you enter '15 pixels' in Tolerance, two image slices within 15 pixels snap to each other.

Maximum Tolerance value is 15 pixels.

Selecting the Grid option

  1. Select the Snap/Grid/Zoom tab in the Properties window.
  2. Select Grid.
  3. Specify the horizontal and vertical spacing of the Grid in Spacing X/Y.
  4. Specify the origin of Grid by specifying Offset X/Y.
  5. To equate X and Y values in Spacing and Offset, select Sync XY.
  6. To activate the snap option, select Snap to grid. If this option is selected, an image slice will snap to the grids when it is moved or resized.


Creating image slices

To slice an image in the Project window and create image slices, take the following steps.

  1. Select the [Tools > Slicer] menu command or click Slicer Tool [image] on the Toolbar.
  2. Place the mouse-pointer on the image in the Project window. The mouse-pointer turns into a cutter [image].
  3. Click the point, which will be the corner of the image slice to be created, and drag it. When the rectangle covers the desired area, release the mouse button. The image slice is displayed as a semi-transparent green rectangle.
    -->
  4. Create another image slice by the same method. When two sliced blocks overlap, the block created later is situated on top.
    -->
  5. Repeat the steps above to create as many image slices as you want.

The semi-transparent green area is referred to as 'slice', and the other area is referred to as an 'unspecified areas'. You can specify the entire image as a slice, as well as a portion of it.

The overlapping order of slices is determined by the order of their creation. The later the image slice is created, the higher up it is placed.

To switch to the Slicer Tool [image] mode from the Selection Tool [image] mode, hold down the <Ctrl> key. The mouse-pointer turns into a cutter [image] and you can slice the image while holding down the <Ctrl> key.

To switch to the Selection Tool [image] mode from the Slicer Tool [image] mode, press the <Ctrl> key. The mouse pointer turns into a selector [image] and you can select and move image slices while holding down the <Ctrl> key.

?? ?? ?? ?? ??? ?? ??? ?? ??? ??


Moving an image slice

You can move the existing image slices by dragging or entering the position information. As you move the slice, its original position and the current position are displayed in the status bar at the bottom.

  1. Select Selection Tool [image] on the Work Tools Toolbar. In case the Work Tools Toolbar is not displayed, select the [View > Work Tools] menu command.
  2. Click any of the image slices in the Project window. The border of the selected image slice is displayed as blue.
  3. Choose one of the following methods.
  • Drag the slice to the desired position. While you are holding down the mouse button, the mouse-pointer appears as a hand shape [image].
  • Select the Slice tab of the Properties window. Specify the position of the image slice by entering the top-left x/y coordinate in Top and Left.

To switch to the Slicer Tool [image] mode from the Selection Tool [image] mode, hold down the <Ctrl> key. The mouse-pointer turns into a cutter [image] and you can slice the image while holding down the <Ctrl> key.

To switch to the Selection Tool [image] mode from the Slicer Tool [image] mode, press the <Ctrl> key. The mouse pointer turns into a selector [image] and you can select and move image slices while holding down the <Ctrl> key.


Resizing an image slice

You can resize an image slice by dragging or entering the size information.

  1. Select Selection Tool [image] on the Work Tools Toolbar.
  2. Click any of the image slices in the Project window. The border of the selected image slice is displayed as a blue rectangle and the 8 resize handles appear around the selected slice.
  3. Choose one of the following methods.
  • Place the mouse-pointer on one of the resize handles. The mouse-pointer then turns into an arrow. Drag the arrow until the selected slice reaches the desired size.
  • Select the Slice tab of the Properties window. Specify the size of the image slice by entering the values in Width and Height.


Setting the default output file format

You should specify the type of file format of the image slices and the folder they are to be saved in. These settings are used when the specified image slices and unspecified areas are saved by executing the [File > Export to HTML... ] menu command.

  1. At the Properties window, select the Default tab.
  2. Specify HTML Options.
  • Export as a Namo Layout Table
    Exports the table containing the image slices and unspecified areas as a Namo WebEditor 5's Layout Table.
  • Use <spacer> tag
    Netscape does not fully support Namo WebEditor 5's Layout Table. To avoid this problem, select this check box and Namo Image Slicer will automatically inserts the <spacer> tag, one of the Netscape specific tags.
  3. Select the file format of the image slices from the File format drop-down menu. You can choose from JPG (24bpp max), PNG (24bpp max), and GIF (8bpp max).
  4. In case you have selected GIF (8bpp max), you should specify the Color Reduction which becomes available only when you have selected GIF (8bpp max).

If you want to save a specific image slice in a file format other than that of the other image slices, refer to Setting the file format of a specific image slice.


Modifying the overlapping order of image slices

In case more than two image slices are overlapped, the lower image slice is sliced automatically in accordance with the image slice(s) placed above. In such case, you may get the unexpected image slices. You can avoid this problem by reordering the overlapped image slices.

To modify the overlapping order of image slices, take the following steps.

  1. Select Selection Tool [image] on the Work Tools Toolbar. Click the image slice you wish to reorder in the Project window.
  2. The border of the selected image slice is displayed in a blue rectangle and the 8 resize handles appear around the selected slice.
  3. Use the submenu of the [Edit > Arrange] menu command or click the relevant button on the Work Tools Toolbar.
    • Bring to Front: Brings the selected image slice to the forefront position.
    • Bring Forward: Brings the selected image slice one step to the front.
    • Send Backward: Sends the selected image slice one step to the back.
    • Send to Back: Sends the selected image slice to the farthest position.


Deleting an image slice

To delete an existing image slice, take the following steps.

  1. Select Selection Tool [image] on the Work Tools Toolbar.
  2. Click the image slice you wish to delete in the Project window. The border of the selected image slice is displayed in a blue rectangle and the 8 resize handles appear around it.
  3. Select the [Edit > Delete] menu command or press the <Del> key. The selected image slice is removed.


Setting the file format of a specific image slice

When you export the Image Slicer Project to a HTML file, the image slices are saved as the file format you have specified in File format in the Default tab of the Properties window and saved as images inserted into each cell. However, you can specify a different file format to a specific slice as you wish.

Specifying the method in which the image slices are saved

  1. Select Selection Tool [image] on the Work Tools Toolbar.
  2. Select the image slice you want to work with in the Project window.
  3. Specify the format of the selected slice from the Export the selected slice as drop-down menu at the Slice tab of the Properties window.
    • Plain image
      Saves the selected slice as an image inserted in the cell using the <img> tag.
    • Cell background image
      Saves the selected slice as a cell background image. Selecting this options will allow you to insert other texts or images inside the cell.
    • Empty cell
      Does not save the selected slice. Instead it is displayed as an empty cell in the exported HTML document. Select this option when you wish to exclude the unnecessary (or unwanted) slices.

Saving the selected slice in a specific file format

  1. Select Selection Tool [image] on the Work Tools Toolbar.
  2. Select the image slice you want to work with in the Project window.
  3. Deselect Use default besides Image format at the Slice tab of the Properties window.
  4. In case you have selected GIF (8bpp max), you should specify the Color Reduction which becomes available only when you have selected GIF (8bpp max).

By default, an image slice has the file name of "Project file name_number.extension". To specify your own filename, deselect Use autonaming and enter the filename you want in the text box below.


Setting the options for unspecified areas

The green semi-transparent area is referred to as 'slice', and the rest is referred to as 'unspecified areas'. You can make either the entire image or a portion of it as a slice. If you select the [File > Export to HTML...] menu command, the unspecified areas are saved as you specified in the Slice tab of the Properties window.

To specify the file type of the unspecified areas, take the following steps.

  1. Click one of the unspecified area blocks using Selection Tool [image].
  2. Select the Slice tab of the Properties window and specify the type of the unspecified areas under Export unspecified area as.
    • Plain images
      Saves the unspecified areas as images inserted in the cell using the <img> tag.
    • Cell background images
      Saves the unspecified areas as cell background images. Selecting this options will allow you to insert other texts or images inside the cell.
    • Empty cells
      Does not save the unspecified areas. Instead it is displayed as empty cells in the exported HTML document. Select this option when you wish to exclude the unnecessary (or unwanted) slices.


Exporting image slices to an HTML file

You can export the sliced images (both the image slices and the unspecified areas) to an HTML file.

  1. Select the [File > Export to HTML...] menu command or click Export to HTML... on the Toolbar.
  2. In the Export to HTML As dialog box, specify the filename and the folder that the HTML file will be saved in and click Save.

Note that this path, specified at the Image folder text box in the Default tab of the Properties window, is a relative path to the directory in which the exported HTML document containing image slices is saved.


Namo Image Slicer - Basic Work Environment

Namo Image Slicer offers the following work environment.

Properties window

  • Slice tab
  • Default tab
  • Snap/Grid/Zoom tab

You can dock or undock the Properties window in the main window of Namo Image Slicer.

Toolbar

The Toolbar provides several buttons that allows you to create, open, save the Namo Image Slicer Project file. It also offers buttons for importing image files or exporting the Project file as an HTML file.

Work Tools Toolbar

The Work Tools Toolbar provides several tools that allows you to select or slice an image, reorder the overlapping image slices, and zoom in/out the image.

Status bar

Status bar gives a brief description of the menu you are currently selecting or shows the position of the mouse-pointer.

The green semi-transparent area created by slicing an image, is referred to as 'slice', and the other area is referred to as 'unspecified areas'.


Work Tools Toolbar

Work Tools Toolbar provides several tools that allows you to select or slice an image, to reorder the overlapping image slices, and zoom in/out the image.

Slicer Tool | Used to slice the image currently opened in the Project window.
Selection Tool | Used to select one of the sliced image blocks.
Zoom | Magnifies or reduces the image currently opened in the Project window. After selecting this button, left-click the image to magnify it and right-click the image to reduce it.
Bring to Front | Brings the selected image slice to the forefront position.
Bring Forward | Brings the selected image slice one step to the front.
Send Backward | Sends the selected image slice one step to the back.
Send to Back | Sends the selected image slice to the lowest position.

The green semi-transparent area created by image slicing, is referred to as 'slice', and the other area is referred to as 'unspecified areas'.


Toolbar

The Toolbar provides several buttons that allows you to create, open, save the Namo Image Slicer Project file. It also offers buttons for importing image files or exporting the Project file to a HTML file.

New | Opens a new Project, which is an area where you can slice an image and edit the image slices.
Open | Opens an existing Namo Image Slicer Project file (*.nis).
Save | Saves the current Project as a Namo Image Slicer Project file (*.nis).
Import Image | Imports an image to the current Project window.
Export to HTML | Saves the current Project as a HTML file and an image folder containing the sliced images.


Properties window - Default tab

Sets the default image file settings for the image slices and the unspecified areas.

HTML options

  • Export as Namo Layout Table
    Exports the table containing the image slices and unspecified areas as a Namo WebEditor 5's Layout Table.
  • Use <spacer> tag
    Netscape does not fully support Namo WebEditor 5's Layout Table. To avoid this problem, select this check box and Namo Image Slicer will automatically inserts the <spacer> tag, one of the Netscape specific tags.

Default image format

  • File format
    You can specify the default image format for the image slices and the unspecified areas. Select the file format from the File format drop-down list. JPG, PNG, and GIF are available options.
  • Color Reduction
    When saving an image in a GIF file format, colors in the image is restricted to 256 colors. Select one of the color reduction methods.

Image folder

Specify the folder in which you wish to save the sliced and unspecified area image files in this text box. Note that this path is relative to the directory in which the HTML document containing sliced images is saved. Default folder is '\images'.

You can dock the Properties window to the left or right side of the Namo Image Slicer window or float it within the window.


Properties window - Snap/Grid/Zoom tab

Neighborhood Snap

Check this option to let nearby image slices stick to each other's borders.

  • Tolerance
    Specifies the application range of the Neighborhood Snap option. If you move or resize an image slice to make the distance from another slice smaller than Tolerance, the two slices will snap to each other. The value of Tolerance ranges from 1 to 15 pixels.

Grid

Selecting Grid lets you create fine-tuned image slices and move the slices minutely. The unit is pixel.

  • Spacing X: Specifies the horizontal spacing of the Grid.
  • Spacing Y: Specifies the vertical spacing of the Grid.
  • Offset X: Specifies the x-coordinate origin of the Grid
  • Offset Y: Specifies the y-coordinate origin of the Grid

Setting the values of Offset X/Y to '0' moves the starting point of the Grid to the top-left of the Project window.

  • Sync XY:Synchronizes the X and Y value in Spacing and Offset
  • Snap to grid: Makes an image slice snap to the grids when it is moved or resized.

Zoom

Zooms in or out for the currently displayed image in the Project window. Select the magnifying factor from the drop-down list to decide how much to zoom in or zoom out.

You can dock the Properties window to the left or right side of the Namo Image Slicer window or float it within the window.


Properties window- Slice tab

Slice dimensions

  • Top
    Specifies the y coordinate of the top edge of the selected slice.
  • Left
    Specifies the x coordinate of the left edge of the selected slice.
  • Width
    Specifies the width of the selected slice.
  • Height
    Specifies the height of the selected slice.

Export the selected slice as

Specifies the method in which the selected slice is saved, when you select the [File > Export to HTML...] menu command.

    • Plain image
      Saves the selected slice as an image inserted in the cell using the <img> tag.
    • Cell background image
      Saves the selected slice as a cell background image. Accordingly, you can insert other text or images inside the cell.
    • Empty cell
      Does not save the selected slice. Instead it is displayed as an empty cell in the exported HTML document. Select this to take care of the unnecessary slices or continuous solid portion.

Image format

  • Use default
    Saves the selected slice in the format specified in the Default tab of the Properties window. In this case, the File format and Color Reduction options are disabled. Deselect this option to set the file format and color reduction method for a specific image slice.
  • File format
    Used when you want to save the selected image slice in a format other than that specified in the Default tab of the Properties window. To do this, deselect the Use default option and select the file format from the File format drop-down list. JPG, PNG, and GIF are available as options.
  • Color Reduction
    When saving an image in a GIF file format, colors in the image is restricted to 256 colors. Select one of the color reduction methods.

Filename

Use autonaming is selected by default and an image slice has the file name of "Project file name_number.extension". To specify your own filename, deselect Use autonaming and enter the desired filename in the text box below.

Export unspecified area as

This is displayed when you click any of the unspecified areas in the Project window. This specifies the method in which the unspecified areas are saved when you select the [File > Export to HTML...] menu command.

    • Plain images
      Saves the unspecified areas as images inserted in the cell using the <img> tag.
    • Cell background images
      Saves the unspecified areas as cell background images. Accordingly, you can insert other text or images inside the cell.
    • Empty cells
      Does not save the selected slice. Instead it is displayed as empty cells in the exported HTML document. Select this option when you wish to exclude the unnecessary (or unwanted) slices.

You can dock the Properties window to the left or right side of the Namo Image Slicer window or float it within the window.